<template>
	<div>
		<div class="swiper-container" id="floor1Swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="(item, index) in list" :key="index">
					<img :src="item.imgUrl" />
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
</template>

<script>
import Swiper from 'swiper';
export default {
	name: 'Carousel',
	props: ['list'],
	watch: {
		list: {
			immediate: true,
			handler(newVal) {
				this.$nextTick(() => {
					var mySwiper = new Swiper('.swiper-container', {
						loop: true, // 循环模式选项

						// 如果需要分页器
						pagination: {
							el: '.swiper-pagination',
							clickable: true
						},

						// 如果需要前进后退按钮
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev'
						},

						// 如果需要滚动条
						scrollbar: {
							el: '.swiper-scrollbar'
						}
					});
				});
			}
		}
	}
};
</script>

<style></style>
